<script setup>
import TheWelcome from '../components/TheWelcome.vue'
import { ref } from 'vue'
const userInfoList = ref([])
fetch("/api1/user/list",{
  method: "POST",
}).then(async response => {
  const res = await response.json()
  userInfoList.value = res.obj.userlist
})


</script>

<template>
  <main>
     <div class="wrap">
        <div class="home-list" v-for="item in userInfoList">
          <div class="card">
            <van-image :src="item.picture"></van-image>
            <div>{{ item.name }}</div>
          </div>
        </div>
    </div>
  </main>
</template>

<style>
.wrap{
  display: flex;
  flex-wrap: wrap;
}
.home-list{
  width: 50%;
}
.card{
  margin: 5px;
  box-shadow: 1px 2px #f0f0f0;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
}
</style>
